<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
    margin: 0px;
    padding: 0px;
}
    a{
      color: black;
      text-decoration: none;
    }
    .top{
        margin-left: 100px;
        margin-right: 100px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .top_left{
      display: inline-block;
    }
    .top_right{
 
      display: inline-block;
      margin-left: 1200px;

    }
    hr{
      color:darkgray;
    }
    .content{
      margin-left: 100px;
      margin-top: 50px;
      height: 500px;
      width: 500px;
      
    }
    .qiangdu1,.qiangdu2,.qiangdu3{
      display: inline-block;
      height: auto;
      width: 60px;
      background-color:#EEE;
      text-align: center;
      margin-top: 1px;
      font-size: 10px;
    }
    .phone{
      font-size: 20px;
      padding-left: 55px;
      padding-top: 30px;
      height: 30px;
   
  
    }
    .phone input,.info input,.password_main input,.res_password input{
      height: 25px;
      width: 195px;
    }
    
    .info{
      font-size: 20px;
      padding-left: 15px;
      padding-top: 30px;
      height: 60px;
      
    }
    .password_main{
      font-size: 20px;
      padding-left: 30px;
      padding-top: 10px;
      height: 60px;
      
    }
    .qiangdu{
      margin-left: 90px;
    }
    .res_password{
      font-size: 20px;
      padding-left: 30px;
      padding-top: 30px;
      height: 60px;
     
    }
    .login{
      margin-top: 30px;
      margin-left: 80px;
      height: 30px;
      width: 250px;
      background-color: #FFD100;
      text-align: center;
      border-radius: 2px;
      color: black;
      font-size: 10px;
      
    }
    strong{
      text-align: center;
      line-height: 30px;
    }
    .btn_login{
      width: 50px;
      height: 30px;
      border: 0;
      border-radius: 2px;
      background-color: #FFD100;
    }
    .phone_check{
      font-size: 13px;
      margin-left: 10px;
       color: crimson;
    }
    .info_check{
      font-size: 13px;
      margin-left: 10px;
      color: crimson;
    }
  </style>

</head>
<body>
  <div class="top">
    <div class="top_left">
      <a href="#">
        <img src="./images/logo.png" alt="美团">
      </a>
    </div>
    
    <div class="top_right">
      <span>已有美团账号？</span>
      <span><input class="btn_login" type="button" value="登录"></span>
    </div>
  </div>
  <hr>
  <div class="content">
    <div class="phone">
      <span>手机号</span>
      <input id="phone_hao" type="text" onblur="check()">
      <span id="phone_check" hidden class="phone_check"> -请输入手机号</span>
    </div>
    <div class="info">
      <span>短信动态码</span>
      <input id="info_hao" type="text" onblur="check2()">
      <span id="info_check" hidden class="info_check"> -请输入短信动态码</span>
    </div>
    <div class="password_main">
      <div class="password">
        <span>创建密码</span>
        <input type="password">
      </div>
      <div class="qiangdu">
        <div class="qiangdu1">弱</div>
        <div class="qiangdu2">中</div>
        <div class="qiangdu3">强</div>
      </div>
     
    </div>
    <div class="res_password">
      <span>确认密码</span>
      <input type="password">
    </div>
    <div class="login">
      <span><strong><a href="#">完成注册并登录</a></strong></span>
    </div>
  </div>
  <script>
      var phone_check = document.getElementById("phone_check");
      var phone_hao = document.getElementById("phone_hao");
      var info_check = document.getElementById("info_check");
      var info_hao = document.getElementById("info_hao");
     
      function check(){
          if(phone_hao.value === ""){
            phone_check.hidden = false;
          }else{
            phone_check.hidden = true;
          }
          if(info_hao.value === ""){
            info_check.hidden = false;
          }else{
            info_check.hidden = true;
          }
      }
      
      function check2(){     
          if(info_hao.value === ""){
            info_check.hidden = false;
          }else{
            info_check.hidden = true;
          }
      }
  </script>
</body>
</html>